<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 如果在路由中，使用查询字符串，给路由传参，则不需要修改path属性 -->
			<router-link to="/login?id=10&name=张三">登录</router-link>
			<router-link to="/register/12/李四">注册</router-link>
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			var login = {
				/* 第一种方式：query传参 */
				template:'<h1>登录---- {{$route.query.id}}---{{$route.query.name}}</h1>',
				
				/* created(){//组件生命周期钩子函数
				//通过this.$route.query传参
					console.log(this.$route.query.id);
				} */
			}
			
			var register = {
				template:'<h1>注册---{{$route.params.id}}---{{$route.params.name}}</h1>',
				created(){
					console.log(this.$route)
				}
			}
			
			var router = new VueRouter({
				routes:[
					{path:'/login',component:login},
					/* 第二种传参方式，通过params，通过math进行正则表达式匹配，必须得全匹配 */
					{path:'/register/:id/:name',component:register}
				]
			})
			var vm = new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router
			})
		</script>
	</body>
</html>
